<template>
	<div class="about-page">
	  <div class="about-box">
	    <div class="aboutItem">
	      <div>作者：</div>
	      <div>凤舞九天</div>
	    </div>
	    <div class="aboutItem">
	      <div>项目地址：</div>
	      <div class="Link">gitee搜索迷你音乐</div>
	    </div>
	    <div class="aboutItem">
	      <div>开源协议：</div>
	      <div>MulanPSL2</div>
	    </div>
	    <div class="programDescription">
	      <div class="descriptionHeader">声明：</div>
	      <div class="descriptionBody">
	        此项目仅用于代码学习和技术交流，不提供任何音乐下载或vip付费服务。请尊重音乐平台和创作者的版权，切勿做出任何损害音乐平台和创作者利益的行为。如若此项目无意侵犯了你的利益，请及时联系作者（1833608478@qq.com）删除源代码。
	      </div>
	    </div>
	    <div class="thanks">
	      <div>致谢：</div>
	      <div class="thanksItem">
	        <div class="Link">Vue.js</div>
	        <div class="Link">DCloud</div>
	        <div class="Link">Element</div>
	        <div class="Link">node-music-api</div>
	      </div>
	    </div>
	  </div>
	</div>
</template>

<script>
	export default {
		name: 'about-page',
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.about-page {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.about-box {
	  padding: 15px;
	}
	
	.aboutItem {
	  margin-top: 5px;
	  display: flex;
	  flex-direction: row;
	  justify-content: space-between;
	  font-size: 16px;
	}
	
	.programDescription {
	  border: 1px solid #c5b5f0;
	  padding: 8px;
	  border-radius: 10px;
	  margin-top: 10px;
	}
	
	.descriptionHeader {
	  font-size: 16px;
	}
	
	.descriptionBody {
	  margin-top: 10px;
	  font-size: 14px;
	  text-indent: 2em;
	  line-height: 18px;
	}
	
	.thanks {
	  border: 1px solid #c5b5f0;
	  padding: 8px;
	  border-radius: 10px;
	  margin-top: 10px;
	  font-size: 16px;
	}
	
	.thanksItem {
		
	}
	
	.thanksItem > div {
	  margin-top: 10px;
	}
</style>
